<template>
	<view
	:style="{ backgroundColor: color }"
	 :class="['btn', type === 'primary' ? 'btn-primary' : '', type === 'secondary' ? 'btn-secondary' : '']" @click="onClick">
		<text class="btn-text">
			<slot></slot>
		</text>
	</view>
</template>

<script>
	export default {
		name: "ZButton",
		data() {
			return {

			};
		},
		props: {
			type: {
				type: String,
				default: 'secondary'
			},
			color: {
				type: String,
				default: ''
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		flex: 1;
		height: 88rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		&.btn-secondary {
			background-color: #333;
      .btn-text {
        color: #fff;
      }
		}

		&.btn-primary {
			background-color: #FFC300;
      .btn-text {
        color: #333;
      }
		}

		.btn-text {
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>
